<template>
	<view class="wrap">
		<view class="bgColor" @click="navTo('personalInfo')">
			<view class="avatar"><!-- @click.stop="uploadAvatar" -->
				<u-image :src="userInfo.avatarUrl || 'https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/默认头像.png'" :lazy-load="true" mode="scaleToFill" radius="10" width="150rpx" height="150rpx"></u-image>
			</view>
			<view class="userText">
				<text class="name">{{ userInfo.wxName || '未填写' }}</text>
				<text class="u-margin-bottom-5">{{ userInfo.wxPhone || '未填写' }}</text>
				<view v-if="userInfo.isAdmin == 1" style="position: absolute;top: 140rpx;right: 140rpx;">
					<u-tag text="审核人员" plain plainFill></u-tag>
				</view>
			</view>
			<image class="arrow" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-white.png"></image>
		</view>
		<view class="id-type">
			<view class="u-flex u-flex-between u-flex-items-center u-m-l-40 u-m-r-40 u-m-b-30">
				<text class="u-font-30">我的来访申请</text>
				<view class="u-font-24 u-flex u-flex-items-center" style="color: gray;" @click="navTo('visitingApplication', { type: '' })">
					<text class="u-m-r-5">全部</text>
					<u-icon name="arrow-right" color="gray" size="12"></u-icon>
				</view>
			</view>
			<view class="id-types">
				<view class="id-type-item" @click="navTo('visitingApplication', { type: 0 })" style="position: relative;">
					<view style="position: absolute;right: 25px;z-index: 999;">
						<u-badge numberType="overflow" type="error" max="99" :value="total"></u-badge>
					</view>
					<image class="id-type-icon" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/task_0.png"></image>
					<text class="id-type-text">待审批</text>
				</view>
				<view class="id-type-item" @click="navTo('visitingApplication', { type: 1 })">
					<image class="id-type-icon" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/task_1.png"></image>
					<text class="id-type-text">已审批</text>
				</view>
				<view class="id-type-item" @click="navTo('visitingApplication', { type: 2 })">
					<image class="id-type-icon" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/task_2.png"></image>
					<text class="id-type-text">审批未过</text>
				</view>
				<view class="id-type-item" @click="navTo('visitingApplication', { type: 9 })">
					<image class="id-type-icon" src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/task_9.png"></image>
					<text class="id-type-text">已来访</text>
				</view>
			</view>
		</view>
		<view class="cellGroup">
			<view v-if="userInfo.isAdmin == 1" @click="navTo('device')">
				<view class="u-flex u-flex-items-center u-flex-fill">
					<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/4.png" style="width: 35rpx;height: 35rpx;"></image>
					<text>设备管理</text>
				</view>
				<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-gray.png"></image>
			</view>
			<view @click="navTo('collect')">
				<view class="u-flex u-flex-items-center u-flex-fill">
					<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/1.png" style="width: 35rpx;height: 35rpx;"></image>
					<text>我的收藏</text>
				</view>
				<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-gray.png"></image>
			</view>
			<view @click="navTo('history')">
				<view class="u-flex u-flex-items-center u-flex-fill">
					<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/2.png" style="width: 35rpx;height: 35rpx;"></image>
					<text>历史浏览</text>
				</view>
				<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-gray.png"></image>
			</view>
			<view v-if="userInfo.isAdmin == 1" @click="navTo('addPerson')">
				<view class="u-flex u-flex-items-center u-flex-fill">
					<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/fkyy_admin/personal/3.png" style="width: 35rpx;height: 35rpx;"></image>
					<text>人员信息登记</text>
				</view>
				<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-gray.png"></image>
			</view>
		</view>
		<!-- <view class="exitLogin" @click="exitLogin">
			退出登录
		</view> -->
		<u-gap height="100"></u-gap>
		<custom-footer :current="current" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 2,
				total: 0
			}
		},
		computed: {
			userInfo() {
				if (Object.keys(this.$store.state.userInfo).length != 0) {
					return this.$store.state.userInfo
				} else if (Object.keys(uni.getStorageSync('userInfo')).length != 0) {
					return uni.getStorageSync('userInfo')
				} else {
					return {
						id: null,
						openId: "",
						unionId: "",
						wxName: "",
						wxPhone: "",
					}
				}
			}
		},
		methods: {
			navTo(path, params = {}) {
				this.$Router.push({ name: path, params })
			},
			uploadAvatar() {
				this.$upload.PhotoOrVideo((path) => {
					uni.showLoading({ title: '头像上传中...' })
					this.$api['userAvatar']({
						avatar: path
					}).then(res => {
						this.$api.getUserInfo().then((u) => {
							this.$store.commit('setUserInfo', u.data)
							uni.showToast({
								title: '修改成功！'
							})
						})
					})
				}, {
					type: 1
				})
			},
			exitLogin() {
				uni.showModal({
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							if (uni.getStorageSync('userInfo')) {
								this.$api.logout().then(res => {
									uni.removeStorageSync('tokenInfo')
									uni.removeStorageSync('userInfo')
									this.$Router.replaceAll({ name: 'login' })
								})
							} else {
								this.$Router.replaceAll({ name: 'login' })
							}
						}
					}
				})
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
				// if(!['1', '3', '4'].includes(this.userInfo.user.roleId)) {
				// 	this.$mp.page.$getAppWebview().setStyle({
				// 		titleNView: {
				// 			titleColor: '#FFFFFF',
				// 			backgroundColor: '#3399ff'
				// 		}
				// 	})
				// }
			// #endif
		},
		onShow() {
			this.$api.getListVisit({
				orderColumn: 'createTime',
				orderDirection: 'descending',
				pageNum: 1,
				pageSize: 99,
				status: 0,
				userId: this.userInfo.id
			}).then(res => {
				this.total = res.data.total
			})
		}
	}
</script>

<style lang="scss">
	.bgColor{
		position: relative;
		display: flex;
		align-items: center;
		height: 330rpx;
		margin-top: 0;
		padding: 0 30rpx 60rpx;
		background: linear-gradient(180deg, #0066d4 0%, #007bff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		.avatar{
			width: 150rpx;
			height: 150rpx;
			margin-right: 35rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.arrow{
			position: absolute;
			right: 30rpx;
			width: 16rpx;
			height: 28rpx;
		}
		.userText{
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 28rpx;
			.name{
				margin-bottom: 15rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
	.id-type{
		position: relative;
		z-index: 99;
		padding: 30rpx 0 34rpx;
		margin: -76rpx 28rpx 0;
		box-shadow: 0px 6rpx 12rpx 0px rgba(0, 128, 255, 0.1);
		border-radius: 12rpx;
		background: #FFFFFF;
		.id-types {
			display: flex;
			flex-direction: row;
			.id-type-item {
				flex: 1;
				text-align: center;
		
				.id-type-icon {
					display: block;
					width: 64rpx;
					height: 64rpx;
					margin: 0 auto 10rpx;
				}
		
				.id-type-text {
					font-size: 28rpx;
				}
			}
		}
	}
	.cellGroup{
		margin: 30rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		&>view{
			display: flex;
			align-items: center;
			padding: 25rpx;
			color: #333333;
			font-size: 28rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 12rpx;
			}
			&>image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 0;
			}
			.u-flex{
				&>view{
					
				}
			}
		}
		&>view:nth-child(n+2){
			border-top: 1rpx solid #E6E6E6;
		}
	}
	.cellGroupAdmin{
		margin: 30rpx 0;
		background-color: #FFFFFF;
		&>view{
			display: flex;
			align-items: center;
			height: 120rpx;
			margin: 0 28rpx;
			color: #333333;
			font-size: 28rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 12rpx;
			}
			&>image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 0;
			}
		}
		&>view:nth-child(n+2){
			border-top: 1rpx solid #E6E6E6;
		}
	}
	.exitLogin{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		margin-top: 24rpx;
		color: #333333;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}
</style>
